<template>
    <view class="panel" :style="{ 'flex': flex }">
        <view v-if="header" :class="['header', { 'header-border': headerBorder }]">
            <view class="title">
                {{title}}
                <view class="title-toolbar">
                    <slot name="title-toolbar"></slot>
                </view>
            </view>
            <view class="toolbar">
                <slot name="toolbar"></slot>
            </view>
        </view>
        <view class="body" :style="{ 'flex-direction': column ? 'column' : 'row' }">
            <slot></slot>
        </view>
    </view>
</template>

<script>
    export default {
        name: "Panel",
        props: {
            title: String,
            header: {
                type: Boolean,
                default: false
            },
            headerBorder: {
                type: Boolean,
                default: false
            },
            flex: {
                type: Number,
                default: 1
            },
            column: {
                type: Boolean,
                default: false
            },
        }
    }
</script>

<style scoped lang="scss">
    .panel {
        background: #fff;
        border-radius: 2rem;
        margin: 0 5rem 5rem;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 0 3rem;

            .title {
                font-size: 2rem;
                font-weight: bold;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .title-toolbar {
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        .header-border {
            border-bottom: 1px solid #ccc;
            padding-bottom: 3rem;
        }

        .body {
            flex: 1;
            display: flex;
        }
    }
</style>